<!--
 * @Author: xiaxia
 * @Description: 这是一个多级表格组件，表格展开后仍然是表格
 * @Date: 2022-10-18 16:15:47
 * @LastEditTime: 2024-05-14 10:54:10
 * @FilePath: \vue-admin-template\src\views\table\nestTable\index.vue
-->
<template>
  <div class="app-container">
    <!-- 表格1， 表格头不同 -->
    <el-card>
      <h4>表格一：表格头不同</h4>
      <el-table
        :data="tableData1"
        style="width: 100%;margin-bottom: 20px;"
        @expand-change="getNew"
        row-key="id"
      >
        <el-table-column type="selection" width="55">
        </el-table-column>
        <el-table-column type="expand">
          <template v-slot="{row}">
            <el-table
              border
              :data="row.children"
              v-loading="row.loading"
            >
              <el-table-column prop="unAmount" label="未税金额" width="110" align="right"/>
              <el-table-column prop="taxAm" label="税额" width="100" align="right"/>
              <el-table-column prop="inAmount" label="含税金额" width="110" align="right"/>
              <el-table-column prop="kpDate" label="开票日期"/>
              <el-table-column prop="bz" label="备注"/>
            </el-table>
          </template>
        </el-table-column>
        <el-table-column prop="codeInvoice" label="发票代码" width="120" />
        <el-table-column prop="numInvoice" label="发票号码" width="180" />
        <el-table-column prop="tpyeInvioce" label="发票类型" width="100" :formatter="getRowType">
          <template v-slot="{row}">
            <el-tag 
              :type="row.tpyeInvioce | typeFilter(tagType)"
              :effect="row.tpyeInvioce | effectFilter(tagEffect)"
            >
              {{ transType(row.tpyeInvioce) }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="unAmount" label="未税金额" width="110" align="right"/>
        <el-table-column prop="taxAm" label="税额" width="100" align="right"/>
        <el-table-column prop="inAmount" label="含税金额" width="110" align="right"/>
        <el-table-column prop="kpDate" label="开票日期"/>
      </el-table>
    </el-card>

    <!-- 表格2，表格头相同-->
    <el-card>
      <h4>表格二：表格头相同</h4>
      <el-table
        :data="tableData2"
        style="width: 100%;margin-bottom: 20px;"
        row-key="id"
        :tree-props="{
          children: 'children2',
          hasChildren: 'hasChildren',
        }"
      >
        <el-table-column type="index" width="50" />
        <el-table-column prop="codeInvoice" label="发票代码" width="120" />
        <el-table-column prop="numInvoice" label="发票号码" width="180" />
        <el-table-column prop="tpyeInvioce" label="发票类型" width="100" :formatter="getRowType" />
        <el-table-column prop="unAmount" label="未税金额" width="110" align="right"/>
        <el-table-column prop="taxAm" label="税额" width="100" align="right"/>
        <el-table-column prop="inAmount" label="含税金额" width="110" align="right"/>
        <el-table-column prop="kpDate" label="开票日期"/>
      </el-table>
    </el-card>
  </div>
</template>

<script>
  import {transType} from '@/utils'
  export default {
    data() {
      return {
        // 表格1 数据
        tableData1: [
          { 
            id: "1",
            codeInvoice: '037002300311',
            numInvoice: "00412134",
            unAmount: "14.68",
            taxAm: "1.32",
            inAmount: "16.00",
            kpDate: "2016-05-01",
            tpyeInvioce: "1",
          },
          { 
            id: "2",
            codeInvoice: '037002300311',
            numInvoice: "00412134",
            unAmount: "14.68",
            taxAm: "1.32",
            inAmount: "16.00",
            kpDate: "2016-05-01",
            tpyeInvioce: "2",
          },
          { 
            id: "3",
            codeInvoice: '',
            numInvoice: "24622000000013293785",
            unAmount: "14.68",
            taxAm: "1.32",
            inAmount: "16.00",
            kpDate: "2016-05-01",
            tpyeInvioce: "I",
          },
          { 
            id: "4",
            codeInvoice: '',
            numInvoice: "24622000000013293785",
            unAmount: "118.35",
            taxAm: "10.56",
            inAmount: "129.00",
            kpDate: "2016-05-01",
            tpyeInvioce: "J",
          },
        ],
        // 模拟二级表格的数据，这里的数据再真实环境中是通过当前展开一级表格行的数据 发请求获得的
        children1: [
          { 
            id: "5",
            unAmount: "14.68",
            taxAm: "1.32",
            inAmount: "16.00",
            kpDate: "2016-05-01",
            bz: "1111",
          },
        ],

        // 表格
        tableData2: [
          { 
            id: "1",
            codeInvoice: '037002300311',
            numInvoice: "00412134",
            unAmount: "14.68",
            taxAm: "1.32",
            inAmount: "16.00",
            kpDate: "2016-05-01",
            tpyeInvioce: "1",
          },
          { 
            id: "2",
            codeInvoice: '037002300311',
            numInvoice: "00412134",
            unAmount: "14.68",
            taxAm: "1.32",
            inAmount: "16.00",
            kpDate: "2016-05-01",
            tpyeInvioce: "2",
          },
          { 
            id: "3",
            codeInvoice: '',
            numInvoice: "24622000000013293785",
            unAmount: "14.68",
            taxAm: "1.32",
            inAmount: "16.00",
            kpDate: "2016-05-01",
            tpyeInvioce: "I",
            children2: [
              { 
                id: "31",
                codeInvoice: '',
                numInvoice: "24622000000013293785",
                unAmount: "14.68",
                taxAm: "1.32",
                inAmount: "16.00",
                kpDate: "2016-05-01",
                tpyeInvioce: "I",
              },
              { 
                id: "32",
                codeInvoice: '',
                numInvoice: "24622000000013293785",
                unAmount: "14.68",
                taxAm: "1.32",
                inAmount: "16.00",
                kpDate: "2016-05-01",
                tpyeInvioce: "I",
              },
            ],
          },
          { 
            id: "4",
            codeInvoice: '',
            numInvoice: "24622000000013293785",
            unAmount: "118.35",
            taxAm: "10.56",
            inAmount: "129.00",
            kpDate: "2016-05-01",
            tpyeInvioce: "J",
          },
        ], 
        tagType: this.$store.state.tagType,
        tagEffect: this.$store.state.tagEffect,
        tpyeInvioceAll: this.$store.state.tpyeInvioceAll, // 发票类型
      }
    },
    filters: {
      typeFilter(type, tagType) {
        let typeMap = tagType
        return typeMap[type]
      },
      effectFilter(effect, tagEffect) {
        const effectMap = tagEffect
        return effectMap[effect]
      },
    },
    methods: {
      // 转换发票类型
      getRowType (row, column) {
        let result = ''
        let val = row[column.property]
        let arr = this._data[column.property + 'All']
        for (let item of arr) {
          console.log(item.value == val);
          if (item.value == val) {
            result = item.label
            break
          }
        }
        return result
      },
      // 转换发票类型
      transType(val) {
        return transType(val)
      },
      getNew(row, expanded){
        console.log(row,expanded) // 当前行 当前已展开行
        // 判断让当前行展开
        if(JSON.stringify(expanded).includes(JSON.stringify(row)) === true){
          this.$set(row, 'loading', true)  // 表格加载开
          this.tableData1.forEach(item => {
            // 找到当前展开的行，把获取到的数据赋值进去
            if(item.id === row.id) {
              console.log('id', item.id, row.id) // 可能打印四种 11 22 33 44
              item.children = this.children1 || []
            }
          })
          // 用定时器模拟发请求的延时过程
          setTimeout(() => {
            this.$set(row, 'loading', false) // 表格加载关
          }, 500)
        } else { // 让当前行关闭
          delete row.children // 删除当前关闭行的 children
          this.$set(row, 'loading', false) // 表格加载关
          delete row.loading // 删除当前关闭行的 loading
        }
      },
    },
  }
</script>